<template>
    <el-tabs v-model="selectTab" @tab-click="clickTabItem" type="card" @tab-remove="removeTab">
        <el-tab-pane name="-1"><span slot="label"><i class="el-icon-house"></i></span>
        </el-tab-pane>
        <el-tab-pane v-for="(tab,index) in tabs" closable :key="tab.id" :label="tab.menuName" :name="tab.id+''">

        </el-tab-pane>
    </el-tabs>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'

    export default {
        name: "CommonTab",
        data() {
            return {

            }
        },
        computed: {
            ...mapState({
                //在vue中可以通过this.tabs获取数据，和data中的属性几乎一样使用
                tabs: state => state.Admin.tabList,
                selectTab: state => state.Admin.selectTab,
            }),
            selectTab: { //为selectTab设置get和set方法,v-model改变需要set方法
                get() {
                    return this.$store.state.Admin.selectTab
                },
                set(val) {
                    this.$store.state.Admin.selectTab = val
                }
            }
        }, methods: {
            ...mapMutations({
                //引用vuex，closeTab为在这里调用的方法名，'closeTab'为menu.js中的方法名
                closeTab: 'closeTab',
                clickTab: 'clickTab',
                updateSelectTab: 'updateSelectTab'
            }), removeTab: function (value) {
                //value为id
                let result = this.tabs.findIndex(item => item.id === Number(value));
                //删除的是选中的tab
                if (Number(value) === Number(this.selectTab)) {
                    if (this.tabs.length != 1) {
                        if (result + 1 === this.tabs.length) {
                            this.updateSelectTab(this.tabs[result - 1].id + '');
                            this.$router.push({path: this.tabs[result - 1].path})
                        } else {
                            this.$router.push({path: this.tabs[result + 1].path})
                            this.updateSelectTab(this.tabs[result + 1].id + '');
                        }
                    } else {
                        this.$router.push({path: '/home'})
                        this.updateSelectTab('-1');
                    }
                }
                this.tabs.splice(result, 1);
            }, clickTabItem: function (value) {    //value是点击标签返回的实例
                let index = value.$data.index;
                if (index != 0) {
                    let thisPath = this.tabs[index - 1].path;
                    //不能push同一个路由
                    if (this.$route.path != thisPath) {
                        this.$router.push({path: this.tabs[index - 1].path})
                        this.clickTab(index);
                    }
                } else {
                    if (this.$route.path != '/home') {
                        this.$router.push({path: '/home'})
                        this.clickTab(index);
                    }
                }

            }
        }
    }
</script>

<style scoped>

</style>
